<template>
  <div class="main-box">
    <div class="table-box">
      <ProTable ref="proTable" :columns="columns" :request-api="getTableColums" @drag-sort="sortTable" :pagination="false">
        <!-- 表格 header 按钮 -->
        <template #tableHeader>
          <el-button type="primary" :icon="CirclePlus" @click="openDrawer('新增')">新增列</el-button>
        </template>
        <!-- 表格操作 -->
        <template #operation="scope">
          <el-button type="primary" link :icon="EditPen" @click="openDrawer('编辑', scope.row)">编辑</el-button>
          <el-button type="primary" link :icon="Delete" @click="deleteAccount(scope.row)">删除</el-button>
        </template>
      </ProTable>
      <TableDrawer ref="drawerRef" />
    </div>
  </div>
</template>
<script setup lang="tsx" name="useTreeFilter">
import { ref, reactive } from "vue";
import { Column } from "@/api/interface/tableMange";
import { ElMessage } from "element-plus";
import { useHandleData } from "@/hooks/useHandleData";
import ProTable from "@/components/ProTable/index.vue";
import TableDrawer from "@/views/system/tableMange/components/TableDrawer.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { CirclePlus, Delete, EditPen } from "@element-plus/icons-vue";
import { getTableColums, deleteTableColums, editTableColums, addTableColums, sortTableColums } from "@/api/modules/tableMange";

// ProTable 实例
const proTable = ref<ProTableInstance>();

// 表格配置项
const columns = reactive<ColumnProps<Column.ResColumnList>[]>([
  { type: "sort", label: "显示顺序", width: 120 },
  {
    prop: "label",
    label: "列名",
    width: 150
  },
  {
    prop: "key",
    label: "接收字段",
    width: 200
  },
  {
    prop: "width",
    label: "宽度",
    width: 150
  },
  {
    prop: "renderType",
    label: "数据类型",
    width: 150,
    tag: true,
    enum: [
      { value: "text", label: "text" },
      { value: "img", label: "img" },
      { value: "strArr", label: "arr" },
      { value: "objArr", label: "ObjArray" },
      { value: "textarea", label: "textarea" },
      { value: "number", label: "number" }
    ]
  },
  {
    prop: "displayField",
    label: "表格显示字段",
    width: 200,
    render: scope => {
      const displayField = scope.row.displayField;
      const arr: string[] =
        typeof displayField === "string" && displayField
          ? displayField.split(",").filter((item: string) => item.trim() !== "")
          : (displayField as string[]);
      return arr ? (
        <>
          {arr.map(tag => (
            <el-tag type="success" size="small" class="truncate" style={{ minWidth: "40px", margin: "0 5px" }}>
              {tag}
            </el-tag>
          ))}
        </>
      ) : (
        <>
          <el-tag type="success" size="small" class="truncate" style={{ maxWidth: "100px", margin: "0 5px" }}>
            无
          </el-tag>
        </>
      );
    }
  },
  {
    prop: "required",
    label: "是否必填",
    width: 100,
    tag: true,
    enum: [
      { value: true, label: "是" },
      { value: false, label: "否" }
    ]
  },
  {
    prop: "category",
    label: "分类",
    width: 120,
    tag: true
  },
  {
    prop: "isShow",
    label: "是否显示",
    width: 100,
    tag: true,
    enum: [
      { value: true, label: "是" },
      { value: false, label: "否" }
    ]
  },
  {
    prop: "sortable",
    label: "排序",
    width: 100,
    tag: true,
    enum: [
      { value: true, label: "是" },
      { value: false, label: "否" }
    ]
  },
  {
    prop: "permission",
    label: "角色",
    width: 150,
    render: scope => {
      const permission = scope.row.permission;
      const arr: string[] =
        typeof permission === "string" && permission
          ? permission.split(",").filter((item: string) => item.trim() !== "")
          : (permission as string[]);
      return arr ? (
        <>
          {arr.map(tag => (
            <el-tag type="success" size="small" class="truncate" style={{ minWidth: "40px", margin: "0 5px" }}>
              {tag}
            </el-tag>
          ))}
        </>
      ) : (
        <el-tag type="success" size="small" class="truncate" style={{ maxWidth: "100px", margin: "0 5px" }}>
          无
        </el-tag>
      );
    }
  },
  { prop: "operation", label: "操作", width: 160, fixed: "right" }
]);

// 删除列信息
const deleteAccount = async (params: Column.ResColumnList) => {
  await useHandleData(deleteTableColums, { id: [params.id?.toString()] }, `删除【${params.label}】列`);
  proTable.value?.getTableList();
};

/**
 * 表格排序处理
 */
const sortTable = async ({ newIndex, oldIndex }: { newIndex?: number; oldIndex?: number }) => {
  if (newIndex === oldIndex) return;
  if (newIndex === undefined || oldIndex === undefined) return;
  await sortTableColums({
    newId: Number(proTable.value?.tableData[newIndex!]?.sortId),
    oldId: Number(proTable.value?.tableData[oldIndex!]?.sortId)
  });
  proTable.value?.getTableList();
  ElMessage.success("修改列表排序成功");
};

// 打开 drawer(新增、查看、编辑)
const drawerRef = ref<InstanceType<typeof TableDrawer> | null>(null);
const openDrawer = (title: string, row: Partial<Column.ResColumnList> = {}) => {
  const params = {
    title,
    isView: title === "查看",
    row: { ...row },
    api: title === "新增" ? addTableColums : title === "编辑" ? editTableColums : undefined,
    getTableList: proTable.value?.getTableList
  };
  drawerRef.value?.acceptParams(params);
};
</script>
